<template>
    <div class="box">
      <div ref="vantaRef" style="width: 100%; height: 800px"></div>
     
    </div>
  </template>
  
  <script>
  import * as THREE from "three";
  import WAVES from "vanta/src/vanta.waves";
  
  export default {
    data() {
      return {};
    },
    mounted() {
      this.vantaEffect = WAVES({
        el: this.$refs.vantaRef,
        THREE: THREE,
      });
      VANTA.WAVES({
        el: this.$refs.vantaRef,
        /*以下为样式配置*/
        mouseControls: true,
        touchControls: true,
        gyroControls: false,
        minHeight: 1100.0,
            minWidth: 1500.0,
        scale: 1.0,
        scaleMobile: 1.0,
        color: 0x5f88,
        shininess: 76.0,
        waveHeight: 12.0,
        waveSpeed: 0.95,
        zoom: 0.89,
      });
    },
    beforeDestroy() {
      if (this.vantaEffect) {
        this.vantaEffect.destroy();
      }
    },
  };
  </script>
  
  <style lang="less" scoped>
  .box {
    position: relative;
    .banner {
      z-index: 999;
      position: absolute;
      top: 30%;
      left: 10%;
      color: #fff;
    }
  }
  h1 {
    font-size: 66px;
  }
  p {
    margin-top: 60px;
    font-size: 18px;
  }
  </style>
  